<template>
  <div class="page-header">
    <div class="menus left">
      <div class="menu" :class="{'active': menu==='SmartLogistics'}" @click="toPage('SmartLogistics')">智慧后勤</div>
      <div class="menu" :class="{'active': menu==='EnergyManagement'}" @click="toPage('EnergyManagement')">能源管理</div>
      <div class="menu" :class="{'active': menu==='CampusPlanning'}" @click="toPage('CampusPlanning')">校园规划</div>
    </div>
    <div class="page-title">
      <span @click="toPage('MainPage')">北京理工大学智慧校园平台</span>
    </div>
    <div class="menus right">
      <div class="menu" :class="{'active': menu==='PersonInformation'}" @click="toPage('PersonInformation')">人员信息</div>
      <div class="menu" :class="{'active': menu==='SmartBuilding'}" @click="toPage('SmartBuilding')">智慧楼宇</div>
      <div class="menu" :class="{'active': menu==='SmartCatering'}" @click="toPage('SmartCatering')">智慧餐饮</div>
    </div>
    <div class="mobile-menu" @click="openMenu">
        <i class="el-icon-s-grid"></i>
    </div>
  </div>
</template>

<script>
export default {
  name: 'PageHeader',
  props: ['menu'],
  methods: {
    toPage (name) {
      this.$router.replace({ name: name })
    },
    openMenu () {
      this.$bus.$emit('mobile-show')
    }
  }
}
</script>

<style scoped lang="scss">

</style>
